//图片放大
//

(function($, w, d){
	$(function(){
		var $area = $('.large-img-area')
		var $img = $('.good-large-img')
		var scale = 1.5; //放大倍数

		if($img.get(0).complete){
			mainScale()
		}else{
			$img.get(0).onload = function(){
				mainScale()
			}
		}
		

		function mainScale(){
			var area = {
				self  : $area,
				width : $area.width(),
				height: $area.height(),
			}
			$area.css('overflow', 'hidden');

			var img = {
				self  : $img,
				width : $img.width(),
				height: $img.height(),
			}

			var originalImg = new Image();
			originalImg.src = img.self.attr('src');
			//console.log(area)

			//鼠标下面的控制区
			if($('#js-magnifying-glass').length > 0){
				var $glass = $('#js-magnifying-glass')
			}else{
				var $glass = $("<div id='js-magnifying-glass'></div> ")	
			}
			
			$glass.css({
				width: area.width/3,
				height: area.height/3,
				'margin-top': -area.height/3/2,
				'margin-left': -area.width/3/2,
				'background-color': '#ddd',
				'opacity':'0.6',
				'position':'fixed'
			});
			$glass.appendTo(area.self).hide()

			//console.log($area.get(0).offsetHeight)
			$(window).mousemove(function(e){
				//console.log(e)
				//area.offsetY = $area.get(0).offsetTop - $area.get(0).scrollTop
				//area.offsetX = $area.get(0).offsetLeft - $area.get(0).scrollLeft
				area.offsetX = $area.get(0).getBoundingClientRect().left;
				area.offsetY = $area.get(0).getBoundingClientRect().top;
				img.offsetX = $img.get(0).getBoundingClientRect().left;
				img.offsetY = $img.get(0).getBoundingClientRect().top;

				var cX = e.clientX;
				var cY = e.clientY;

				if(cX<area.offsetX || cX>(area.offsetX+area.width) || cY<area.offsetY || cY>area.offsetY+area.height){
					$glass.hide()
					$img.css({
						margin:'0 auto',
						height:'100%',
						width:'auto'
					});
				}else{
					$glass.css({
						top: cY,
						left: cX,
					}).show();

					$img.width(img.width*scale+$glass.width()*3)
					$img.height(img.height*scale+$glass.height()*3)

					var leftX = (cX-area.offsetX)*scale;
					var leftY = (cY-area.offsetY)*scale;

					//console.log(img,leftX,leftY)
					$img.css({
						'margin-left': -leftX,
						'margin-top': -leftY,
					});
				}
			});

			function main(){

			}

			$img.mouseout(function(event) {
				//console.log('mouse leave')
			});
		}
	})
	
})(jQuery ,window ,document)